<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钉钉群机器人 Webhook 配置指南 - AI Trend Publish</title>
    <style>
        :root {
            --primary-color: #2563eb;
            --text-color: #1f2937;
            --bg-color: #ffffff;
            --nav-bg: #f3f4f6;
            --code-bg: #282c34;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background: var(--bg-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            display: flex;
            flex: 1;
            height: 100vh;
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .nav-toggle {
            display: none;
            position: fixed;
            top: 1rem;
            right: 1rem;
            z-index: 1000;
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 0.5rem;
            border-radius: 4px;
            cursor: pointer;
            width: 40px;
            height: 40px;
        }

        .nav-toggle span {
            display: block;
            width: 20px;
            height: 2px;
            background: white;
            margin: 4px auto;
            transition: all 0.3s;
        }
        
        nav {
            width: 280px;
            height: 100vh;
            padding: 2rem 1.5rem;
            background: var(--nav-bg);
            border-right: 1px solid #e5e7eb;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            transition: transform 0.3s ease;
            z-index: 100;
        }
        
        main {
            flex: 1;
            padding: 2rem 3rem;
            margin-left: 280px;
            max-width: 100%;
            overflow-y: auto;
            min-height: 100vh;
        }
        
        h1 {
            font-size: 2rem;
            margin: 1rem 0 1.5rem 0;
            color: var(--primary-color);
        }
        
        h2 {
            font-size: 1.5rem;
            margin: 1.5rem 0 1rem 0;
            color: var(--text-color);
        }
        
        h3, h4, h5, h6 {
            margin: 1rem 0;
            color: var(--text-color);
        }
        
        p {
            margin: 1rem 0;
        }
        
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color 0.2s;
        }
        
        a:hover {
            text-decoration: underline;
            color: #1d4ed8;
        }
        
        nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        nav li {
            margin: 0.75rem 0;
            padding: 0.25rem 0;
        }
        
        nav a {
            display: block;
            padding: 0.5rem;
            border-radius: 4px;
            transition: all 0.2s;
        }
        
        nav a:hover {
            background: rgba(37, 99, 235, 0.1);
            text-decoration: none;
        }
        
        pre {
            background: var(--code-bg);
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1.5rem 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        code {
            font-family: "JetBrains Mono", Consolas, Monaco, "Andale Mono", monospace;
            font-size: 0.9em;
        }
        
        :not(pre) > code {
            background: #f3f4f6;
            padding: 0.2em 0.4em;
            border-radius: 4px;
            color: #e06c75;
        }
        
        table {
            border-collapse: collapse;
            width: 100%;
            margin: 1.5rem 0;
            background: white;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }
        
        th, td {
            border: 1px solid #e5e7eb;
            padding: 0.75rem 1rem;
            text-align: left;
        }
        
        th {
            background: var(--nav-bg);
            font-weight: 600;
        }
        
        tr:nth-child(even) {
            background: #f9fafb;
        }
        
        img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1rem 0;
        }
        
        blockquote {
            border-left: 4px solid var(--primary-color);
            margin: 1.5rem 0;
            padding: 1rem 1.5rem;
            background: var(--nav-bg);
            border-radius: 0 8px 8px 0;
        }
        
        ul, ol {
            margin: 1rem 0;
            padding-left: 1.5rem;
        }
        
        li {
            margin: 0.5rem 0;
        }
        
        hr {
            border: none;
            border-top: 1px solid #e5e7eb;
            margin: 2rem 0;
        }
        
        @media (max-width: 768px) {
            .nav-toggle {
                display: block;
            }
            
            nav {
                width: 100%;
                max-width: 300px;
                transform: translateX(-100%);
            }
            
            nav.active {
                transform: translateX(0);
            }
            
            main {
                margin-left: 0;
                padding: 1rem;
            }

            .nav-toggle.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

            .nav-toggle.active span:nth-child(2) {
                opacity: 0;
            }

            .nav-toggle.active span:nth-child(3) {
                transform: rotate(-45deg) translate(5px, -5px);
            }

            h1 {
                font-size: 1.75rem;
                margin: 0.75rem 0 1rem 0;
            }

            h2 {
                font-size: 1.35rem;
            }

            pre {
                margin: 1rem -1rem;
                border-radius: 0;
            }

            blockquote {
                margin: 1rem -1rem;
                border-radius: 0;
            }

            table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
        }
    </style>
</head>
<body>
    <button class="nav-toggle" aria-label="切换导航菜单">
        <span></span>
        <span></span>
        <span></span>
    </button>
    <div class="container">
        <nav>
            <h1>文档导航</h1>
            <ul>
                <li><a href="https://openaispace.github.io/ai-trend-publish/dingtalk-webhook-guide.html">钉钉群机器人 Webhook 配置指南</a></li>
            </ul>
        </nav>
        <main>
            <h1 id="钉钉群机器人-webhook-配置指南">钉钉群机器人 Webhook 配置指南</h1>
<h3 id="1-进入群聊"><strong>1. 进入群聊</strong></h3>
<ul>
<li>打开目标群聊，点击右上角&quot;...&quot;按钮，选择&quot;群设置&quot;。</li>
</ul>
<h3 id="2-添加机器人"><strong>2. 添加机器人</strong></h3>
<ul>
<li>在&quot;群设置&quot;中找到&quot;智能群助手&quot;，点击&quot;添加机器人&quot;。</li>
<li>选择&quot;自定义&quot;机器人。</li>
</ul>
<h3 id="3-配置机器人"><strong>3. 配置机器人</strong></h3>
<ul>
<li>输入机器人名称（如&quot;测试机器人&quot;）。</li>
<li>（可选）上传头像。</li>
<li>设置安全验证方式：<ul>
<li><strong>关键字</strong>：消息需包含指定关键字。</li>
<li><strong>加签</strong>：启用签名验证。</li>
<li><strong>IP限制</strong>：限制访问 IP 地址。</li>
</ul>
</li>
</ul>
<h3 id="4-获取-webhook-url"><strong>4. 获取 Webhook URL</strong></h3>
<ul>
<li>完成配置后，系统会生成一个 Webhook URL。</li>
<li>点击&quot;复制&quot;按钮，保存该链接。</li>
</ul>
<h3 id="5-测试机器人"><strong>5. 测试机器人</strong></h3>
<p>使用以下命令测试：</p>
<pre class="shiki one-dark-pro" style="background-color:#282c34;color:#abb2bf" tabindex="0"><code><span class="line"><span style="color:#61AFEF">curl</span><span style="color:#D19A66"> -X</span><span style="color:#98C379"> POST</span><span style="color:#98C379"> 'https://oapi.dingtalk.com/robot/send?access_token=your_access_token'</span><span style="color:#56B6C2"> \</span></span>
<span class="line"><span style="color:#ABB2BF">-H </span><span style="color:#98C379">'Content-Type: application/json'</span><span style="color:#56B6C2"> \</span></span>
<span class="line"><span style="color:#ABB2BF">-d </span><span style="color:#98C379">'{"msgtype": "text", "text": {"content": "测试消息"}}'</span></span></code></pre>
<h3 id="注意事项"><strong>注意事项</strong></h3>
<ul>
<li>妥善保管 Webhook URL。</li>
<li>每个群最多添加 20 个机器人。</li>
<li>注意消息频率限制（每分钟不超过 20 条）。</li>
</ul>

        </main>
    </div>
    <script>
        // 移动端导航切换
        const navToggle = document.querySelector('.nav-toggle');
        const nav = document.querySelector('nav');
        
        navToggle.addEventListener('click', () => {
            nav.classList.toggle('active');
            navToggle.classList.toggle('active');
        });

        // 点击导航链接时自动关闭导航菜单
        document.querySelectorAll('nav a').forEach(link => {
            link.addEventListener('click', () => {
                if (window.innerWidth <= 768) {
                    nav.classList.remove('active');
                    navToggle.classList.remove('active');
                }
            });
        });

        // 点击内容区域时关闭导航菜单
        document.querySelector('main').addEventListener('click', () => {
            if (window.innerWidth <= 768 && nav.classList.contains('active')) {
                nav.classList.remove('active');
                navToggle.classList.remove('active');
            }
        });
    </script>
</body>
</html>